<script setup lang="ts">
import IconSvg from "@/components/IconSvg/index.vue";
import { ITableData } from "./data";
import { queryList } from "./service";
import { IResponseData } from "@/@types/utils.request";
import { SearchParams } from "./data";
import searchBox from "./components/searchBox.vue";
import upvote from "./components/upvote.vue";
import review from "./components/review.vue";
import edit from "./components/edit.vue";
import articleReview from "./components/articleReview.vue";
import { reactive, ref, onMounted } from "vue";
import { uniformPageSize } from "@/config/settings";
import { formatDate } from "@/utils/formatDate";
import { statusMap } from "@/utils/statusMap";

const table = reactive<ITableData>({
	loading: false,
	list: [],
	pagination: {
		total: 0,
		pageNum: 1,
		pageSize: 10,
	},
});
// 搜索
const searchData = ref<SearchParams>({ userNickName: "", auditStatus: "" });
const auditStatusList = [
	{
		id: 0,
		name: "未审核",
		type: "warning",
	},
	{
		id: 1,
		name: "已审核",
		type: "success",
	},
];
// 审核状态
const reviewStatusList = [
	{
		id: 1,
		name: "审核通过",
	},
	{
		id: 2,
		name: "审核未通过",
	},
];

const adminId = ref<number>();
// 点赞弹窗
const upvoteVisible = ref<boolean>(false);
const handUpvote = (articleId: number) => {
	adminId.value = articleId;
	upvoteVisible.value = true;
};

// 评论弹窗
const reviewVisible = ref<boolean>(false);
const handleReview = (articleId: number) => {
	adminId.value = articleId;
	reviewVisible.value = true;
};

// 编辑
const editVisible = ref<boolean>(false);
const editList = ref<any>({});
const handEditChange = (row: any) => {
	adminId.value = row.id;
	editList.value = row;
	editVisible.value = true;
};

// 文章审核
const articleReviewVisible = ref<boolean>(false);
const handleArticleReview = (row: any) => {
	adminId.value = row.articleId;
	articleReviewVisible.value = true;
};

// 列表数据
const getList = async (pageNum: number, pageSize?: number): Promise<void> => {
	table.loading = true;

	try {
		const response: IResponseData<any> = await queryList({
			pageSize: pageSize || table.pagination.pageSize,
			pageNum: pageNum,
			...searchData.value,
		});
		const { data } = response;
		console.log(data);
		const list = data.records.map((item: { images: string }) => {
			return { ...item, imgList: JSON.parse(item.images) };
		});
		console.log(list);
		table.list = list || [];
		table.pagination = {
			...table.pagination,
			total: data.total || 0,
			pageNum,
		};
	} catch (error: any) {
		console.log(error);
	}
	table.loading = false;
};

// 搜索
const onSearch = (val: any) => {
	searchData.value = val;
	getList(1);
};

// 刷新数据
const onRefresh = () => {
	handleSizeChange();
};

const handleSizeChange = () => {
	getList(table.pagination.pageNum, table.pagination.pageSize);
};

const handleCurrentChange = (val: number) => {
	getList(val);
};
onMounted(() => {
	getList(1);
});
const route = useRoute();
</script>

<template>
	<searchBox v-model="searchData" :auditStatusList="auditStatusList" @search="onSearch" />
	<upvote v-model="upvoteVisible" :id="adminId" />
	<review v-model="reviewVisible" :id="adminId" />
	<edit v-model="editVisible" :editList="editList" :adminId="adminId" @refresh="onRefresh" />
	<articleReview
		v-model="articleReviewVisible"
		:reviewStatusList="reviewStatusList"
		:id="adminId"
		@refresh="onRefresh"
	/>
	<el-card shadow="never">
		<template #header>
			<el-row justify="space-between">
				<el-col :span="8" style="font-size: 18px"> <IconSvg name="modular" />&nbsp;{{ route.meta.title }}</el-col>
				<el-col :span="8" style="text-align: end"> </el-col>
			</el-row>
		</template>

		<div style="width: 99.9%">
			<el-table row-key="id" :data="table.list" v-loading="table.loading" stripe border>
				<el-table-column
					type="index"
					label="序号"
					:index="
						(index: number) => {
							return (table.pagination.pageNum - 1) * table.pagination.pageSize + index + 1;
						}
					"
					width="55"
				>
				</el-table-column>

				<el-table-column label="发送人昵称" prop="userNickName"> </el-table-column>
				<el-table-column label="用户头像" prop="userHeadimgurl">
					<template #default="{ row }">
						<el-image :src="row.userHeadimgurl" style="width: 80px; height: 80px" fit="cover" />
					</template>
				</el-table-column>
				<el-table-column label="内容" prop="content"> </el-table-column>
				<el-table-column label="内容图片" prop="imgList" width="200" align="center">
					<template #default="{ row }">
						<el-carousel trigger="click" height="80px" indicator-position="none">
							<el-carousel-item v-for="item in row.imgList" :key="item">
								<el-image :src="item" style="width: 130px; height: 80px" fit="cover" />
							</el-carousel-item> </el-carousel></template
				></el-table-column>
				<el-table-column label="状态" prop="isShow">
					<template #default="{ row }">
						<el-switch v-model="row.isShow" :active-value="1" :inactive-value="0" disabled />
					</template>
				</el-table-column>
				<el-table-column label="审核状态" prop="auditStatus">
					<template #default="{ row }">
						<el-tag :type="statusMap(auditStatusList, row.auditStatus).type">{{
							statusMap(auditStatusList, row.auditStatus).name
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createTime">
					<template #default="{ row }">
						{{ formatDate(row.createTime) }}
					</template>
				</el-table-column>
				<el-table-column label="评论数" prop="commentSum">
					<template #default="{ row }">
						<el-button type="text" @click="handleReview(row.articleId)">{{ row.commentSum }}</el-button>
					</template>
				</el-table-column>
				<el-table-column label="点赞数" prop="praiseSum">
					<template #default="{ row }">
						<el-button type="text" @click="handUpvote(row.articleId)">{{ row.praiseSum }}</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" prop="action" width="200">
					<template #default="{ row }">
						<el-button type="primary" link @click="handEditChange(row)"
							><template #icon><IconSvg name="edit" /></template>编辑</el-button
						>
						<el-button type="primary" link @click="handleArticleReview(row)" v-if="row.auditStatus === 0"
							><template #icon> <IconSvg name="edit" /></template>审核</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="padding-t10 display-flex-end">
			<el-pagination
				background
				layout="total,sizes, prev, pager, next"
				v-model:current-page="table.pagination.pageNum"
				v-model:page-size="table.pagination.pageSize"
				:page-sizes="uniformPageSize"
				:total="table.pagination.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</div>
	</el-card>
</template>
